<template>
	<view class="avator">
		<view class="avator__dot" :style="{backgroundColor: dotColor,top: offset.top,right: offset.right}" v-if="dotVisible"></view>
		<view class="avator__image" :style="{borderRadius: circle ? '50%' : '10rpx'}" v-if="avatorSrc">
			<image :style="{borderRadius: circle ? '50%' : '10rpx'}" :src="avatorSrc" mode="" @error="error"></image>
		</view>
		<view class="avator__name" v-else>{{formatName(name)}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatorSrc: ''
			}
		},
		props: {
			avator: {
				type: String,
				default: ''
			},
			name: {
				type: String,
				default: ''
			},
			circle: {
				type: Boolean,
				default: false
			},
			dotVisible: {
				type: Boolean,
				default: false
			},
			dotColor: {
				type: String,
				default: 'red'
			},
			offset: {
				type: Object,
				default: () => {
					return {
						top: '-10rpx',
						right: '-10rpx',
					}
				}
			},
		},
		watch: {
			avator: {
				immediate: true,
				handler() {
					this.avatorSrc = this.avator;
				}
			}
		},
		methods: {
			formatName(v) {
				return v.length > 2 ? v.substring(v.length-2) : v
			},
			error() {
				this.avatorSrc = ''
			}
		}
	}
</script>

<style scoped lang="scss">
	.avator {
		width: 100%;
		height: 100%;
		position: relative;
		
		&__dot {
			position: absolute;
			width: 15rpx;
			height: 15rpx;
			border-radius: 50%;
			z-index: 9;
		}
		
		&__image {
			width: 100%;
			height: 100%;
			
			image {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}
		}
		
		&__name {
			font-size: 23rpx;
			width: 100%;
			height: 100%;
			background-color: #3C9CFF;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 10rpx;
		}
	}
</style>
